<template>
    <div class="personalCertificate">
        <div class="personalCertificateContent">
          <div class="contentTitle">
            <div class="titleIcon">
              <img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fcertificate%402x.png" lazy-load>
            </div>
            <div class="titleText">证书</div>
          </div>
          <div class="contentList" v-if="certificateState === 1"> 
            <div class="contentImage" v-for="(item, index) in certificateData" 
              :key="index"
              v-if="item.certificate && item.user_name"
              @click.stop.prevent="showContentImage(item, certificateData)" >
              <img :src="item.certificate+'@wm_2,t_'+item.user_name+certificateNameParam+'|wm_2,t_'+item.finish_time+certificateTimeParam" lazy-load  mode="widthFix">
              <!-- <div class="userName">{{userData.nickName}}</div> -->
            </div>
          </div>
          <div v-else-if="certificateState === 0">
            <img src="https://mobuz-mp.cdn.bcebos.com/matter%2Fno_certifications.jpg" lazy-load  mode="widthFix" width="100%">
          </div>
          <!-- <div v-else>....证书加载中.....</div> -->
        </div>
    </div>
</template>

<script>
import {obtainPersonalCertificate} from '@/config/api'
import {showPictureCard} from '@/config/wUtils'
export default {
  data () {
    return {
        // 用户信息数据
        userData: [],
        // 证书信息数据
        certificateData: [],
        // 证书图片
        certificateImage: '',
        // 是否有证书
        certificateState: null,
        // 证书签名  百度云水印参数
        certificateNameParam: ',ff_TWljcm9zb2Z0WWFIZWk=,fs_normal,sz_36,fc_000000,g_5,x_0,y_-30',
        // 证书日期  百度云水印参数
        certificateTimeParam: ',ff_TWljcm9zb2Z0WWFIZWk=,fs_normal,sz_16,fc_000000,x_65,y_55'
    }
  },
  mounted () {
    let self = this
    // 初始化 我的证书 界面
    self.initPersonalCertificate()
    // console.log(self.certificateState, '.............')
  },
  methods: {
    // 初始化 我的证书 界面
    async initPersonalCertificate () {
        let self = this;
        // 是否有证书
        self.certificateState = null
        if (wx.getStorageSync('userInfo')) {
          // 用户信息数据
          self.userData = wx.getStorageSync('userInfo')
          wx.showNavigationBarLoading()
          wx.showLoading({title: '加载中'})
          // const certificateInfo = await obtainPersonalCertificate(wx.getStorageSync('batch_id'), self.userData.nickName) 
          const certificateInfo = await obtainPersonalCertificate(self.userData.openId, self.userData.nickName, self.userData.unionId) 
          if (certificateInfo.status === 200) {
              // 证书信息数据
              self.certificateData = certificateInfo.data
              // 是否有证书
              self.certificateState = certificateInfo.state
              // if (self.certificateData) {
              //   // 证书图片
              //   self.certificateImage = self.certificateData.certificate+'@wm_2,t_'+self.certificateData.user_name+',fs_bold,x_20,y_200'
              // }
              
              // if (wx.getStorageSync('userInfo')) {
              //     // 用户信息数据
              //     self.userData = wx.getStorageSync('userInfo')
              // }
          }
          wx.hideNavigationBarLoading()
          wx.stopPullDownRefresh()
          wx.hideLoading()
          console.log(certificateInfo, self.userData, '初始化 我的证书 界面')
        }
    },
    // 展示 图片
    showContentImage(item, itemList) {
      let self = this;
      let imageList = []
      itemList.forEach( (itemCell, indexCell) => {
        console.log(itemCell, '......展示图片列表')
        imageList.push(itemCell.certificate+'@wm_2,t_'+itemCell.user_name+self.certificateNameParam+'|wm_2,t_'+itemCell.finish_time+self.certificateTimeParam)
      });
      showPictureCard(item.certificate+'@wm_2,t_'+item.user_name+self.certificateNameParam+'|wm_2,t_'+item.finish_time+self.certificateTimeParam, imageList)
    }
  },
  // 下拉刷新
  onPullDownRefresh () {
    let self = this;
    // 初始化 我的证书 界面
    self.initPersonalCertificate()
  },
  // 页面显示
  onShow () {
    let self = this;
    // console.log('页面显示')
    // // // 证书信息数据
    // // self.certificateData = []
    // // 初始化 我的证书 界面
    // self.initPersonalCertificate()
  }
}
</script>

<style>
page{
    width: 100%;
    height: 100%;
}
</style>
<style lang="less" scoped>
.personalCertificate {
  width: 100%;
  // height: 100%;
  background: #ffffff;
  .personalCertificateContent{
    width: 600rpx;
    margin: 23.5rpx auto;
    .contentTitle{
      width: 100%;
      text-align: center;
      div{
        display: inline-block;
        vertical-align: middle;
        height: 48rpx;
        line-height: 48rpx;
      }
      .titleIcon{
        width: 59rpx;
        height: 31rpx;
        line-height: 31rpx;
        margin-right: 12.5rpx;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .titleText{
        font-family: PingFangSC-Regular;
        font-size: 34rpx;
        color: #333333;
        letter-spacing: 0.69rpx;
        text-align: center;
      }
    }
    .contentList{
      .contentImage{
        background: #FFFFFF;
        box-shadow: 0 0 10rpx 1rpx rgba(181,181,181,0.30);
        border-radius: 4rpx;
        width: 100%;
        margin-top: 30rpx;
        position: relative;
        img{
          width: 100%;
          height: 100%;
        }
        .userName{
            position: absolute;
            bottom: 0;
            right: 0;
        }
      }
    }
  }
}
</style>
